<template>
    <nav>
        <ul class="pagination" ref="pagination">
            <li><a href="javascript:;" :class="{banStyle:currentIndex===1}" @click="handlePreArrow"> &lt; </a></li>
            <li v-if="isPrevShow"><a href="javascript:;" @click="clickTheFirst">1</a></li>
            <li v-if="isPrevShow"><a href="javascript:;" @click="clickPreEllip">...</a></li>
            
            <li v-for="n in paginationNumber" :key="n">
                <a href="javascript:;" :class="{selected:n === currentIndex}" @click="clickCurrentIndex(n)">{{n}}</a>
            </li>

            <li v-if="isNextShow"><a href="javascript:;"  @click="clickNextEllip">...</a></li>
            <li v-if="isNextShow"><a href="javascript:;" @click="clickTheLast">{{totalNumber}}</a></li>
            <li><a href="javascript:;" :class="{banStyle:currentIndex===totalNumber}" @click="handleNextArrow"> > </a></li>
        </ul>
    </nav>
</template>

<script>
export default {
    name:'pagination',
    data(){
        return{
            currentIndex:1,
            isPrevShow:false,
            isNextShow:false
        }
    },
    props:{
        count:0,
        display:0,
        size:''
    },
    computed:{
        totalNumber: function(){
            return  Math.ceil(this.count / this.display)
        },
        paginationNumber:function(){
           let currentArr=[]
           if(this.totalNumber>7){
               if(this.currentIndex<5){
                    this.isNextShow = true
                    this.isPrevShow = false
                  
                    return 6
               }else if(this.currentIndex>=5 && this.currentIndex<this.totalNumber-3){
                   this.isPrevShow = true
                   this.isNextShow = true
                   for(let i=this.currentIndex-2;i<this.currentIndex+3;i++){
                       currentArr.push(i)
                   }
                  
                   return currentArr
               }else{
                   this.isPrevShow = true
                   this.isNextShow = false
                   for(let i=this.totalNumber-5;i<=this.totalNumber;i++){
                       currentArr.push(i)
                   }
                  
                   return currentArr
               }
              
           }         
        }
    },
    methods:{
       handlePreArrow(){
            this.currentIndex -=1
            this.$emit('current-index',this.currentIndex)
       },
       clickTheFirst(){
            this.currentIndex = 1
            this.$emit('current-index',this.currentIndex)
       },
       clickPreEllip(){
           this.currentIndex -=4
           this.$emit('current-index',this.currentIndex)
       },
       clickCurrentIndex(index){
           this.currentIndex = index
           this.$emit('current-index',this.currentIndex)
       },
       clickNextEllip(){
           this.currentIndex +=4
           this.$emit('current-index',this.currentIndex)
       },
       clickTheLast(){
            this.currentIndex = this.totalNumber
            this.$emit('current-index',this.currentIndex)
       },
       handleNextArrow(){
            this.currentIndex +=1
            this.$emit('current-index',this.currentIndex)
       }
    }
}
</script>

<style lang="stylus" scoped>
.pagination
    overflow: hidden;
    display: table;
    margin: 0 auto;
    height: 50px;
    li
        float: left;
        height: 35px;
        border-radius: 5px;
        list-style-type:none;
        a 
            display: block;
            width: 35px;
            height: 35px;
            text-align: center;
            line-height: 35px;
            font-size: 18px;
            font-family :'KaiTi' 
    
            border-radius: 5px;
            text-decoration: none
            color :#000000
            &.selected
                color :#00ccff
            &.banStyle
                color :#F2F2F2 
                cursor :not-allowed
                pointer-events :none
</style>
